<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的礼品</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <link href="layui/css/layui.css" rel="stylesheet">
    <style>
        .layui-tab{
            margin: 0px;
        }
        .layui-tab-title li{
            min-width: 33%;
            padding: 0;
            border-right: 1px solid #fff;
        }
        .layui-tab-title li:last-child{
            border-right:none;
        }
        .layui-tab-brief>.layui-tab-title .layui-this{
            background: #fff;
            /*color: #eb6d10;*/
        }
        .layui-tab-brief>.layui-tab-title .layui-this:after{
            /*border-bottom: 2px solid #eb6d10;*/
        }
        .layui-tab-content{
            padding: 0px;
        }
        .order-div{
            margin: 2vw;
            border-radius: 5px 0px 0px 5px;
            height: 94px;
            background: #fff;
        }
        .bd-green{
            border-left: 4px solid #40c765;
        }
        .bd-grey{
            border-left: 4px solid #a4a4a4;
        }
        .order-div table{
            width: 100%;
            height: 100%;
        }
        .green-btn{
            background: #29d38d;
            color: #fff;
            border-left: 5px dotted #fff;
            border-radius: 5px;
        }
        .grey-btn{
            background: #9d9d9d;
            color: #fff;
            border-left: 5px dotted #fff;
            border-radius: 5px;
        }
        .goods-img{
            width: 55px;
            height: 55px;
            border-right: 2px solid #eee;
        }
        .ft-small{
            font-size: 10px;
        }
        .pd-l-5p{
            padding-left: 5px;
        }
        .pd-3p{
            padding: 3px 0px;
        }
        .go-title{
            color: #000;
            font-size: 14px;
        }

        .pageScroll{
            height: 85.5vh;
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="head-nav">
    <div class="nav-left" onclick="javascript:history.back(-1)"><img src="img/gua/u18.png"></div>
    <div class="nav-title">我的礼品</div>
</div>
<div class="main">
    <div class="layui-tab layui-tab-brief" lay-filter="goodsTab">
        <ul class="layui-tab-title">
            <li class="layui-this" id="waitLi" lay-id="wait"  data-value="0">待兑换(<span id="waitSpan"></span>)</li>
            <li lay-id="ready" id="readyLi"  data-value="1">已兑换(<span id="readySpan"></span>)</li>
            <li lay-id="past" id="pastLi"  data-value="2">已过期(<span id="pastSpan"></span>)</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="wait">
                <div class="pageScroll">
                    <div id="orderList">

                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
            <div class="layui-tab-item" id="ready">
                <div class="pageScroll">
                    <div id="orderList">

                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
            <div class="layui-tab-item" id="past">
                <div class="pageScroll">
                    <div id="orderList">

                    </div>
                    <div id="pagination"></div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--以下是模板-->
<script type="text/wait">
    <div class="order-div bd-green">
        <table>
            <tr>
                <td width="60px" class="center"><img class="goods-img" src="{goods_img}"></td>
                <td class="ft-small pd-l-5p">
                    <div class="go-title pd-3p">【{goods_name}】</div>
                    <div>有效期至：{expiration_date}</div>
                    <div>门店：{shop_name}</div>
                    <div>地址：{address}</div>
                </td>
                <td width="50px" class="center green-btn" data-value="{codes}" onclick="showCode(this)">立<br/>即<br/>兑<br/>换</td>
            </tr>

        </table>
    </div>
</script>

<script type="text/ready">
    <div class="order-div bd-grey">
        <table>
            <tr>
                <td width="60px" class="center"><img class="goods-img" src="{goods_img}"></td>
                <td class="ft-small pd-l-5p">
                    <div class="go-title pd-3p">【{goods_name}】</div>
                    <div>有效期至：{expiration_date}</div>
                    <div>门店：{shop_name}</div>
                    <div>地址：{address}</div>
                </td>
                <td width="50px" class="center grey-btn">已<br/>兑<br/>换</td>
            </tr>

        </table>
    </div>
</script>

<script type="text/past">
    <div class="order-div bd-grey">
        <table>
            <tr>
                <td width="60px" class="center"><img class="goods-img" src="{goods_img}"></td>
                <td class="ft-small pd-l-5p">
                    <div class="go-title pd-3p">【{goods_name}】</div>
                    <div>有效期至：{expiration_date}</div>
                    <div>门店：{shop_name}</div>
                    <div>地址：{address}</div>
                </td>
                <td width="50px" class="center grey-btn">已<br/>过<br/>期</td>
            </tr>

        </table>
    </div>
</script>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="layui/layui.js"></script>

<script type="application/javascript">
    var phoneNum;
    $(function () {
        getopenid();
        opendIdLogin();
        //页面初始化的时候全部加载一页
        queryList($("#waitLi"));
        queryList($("#readyLi"));
        queryList($("#pastLi"));
    });
    layui.use('element', function(){
        var element = layui.element;
        //监听Tab切换，
        element.on('tab(goodsTab)', function(){
            queryList(this);
        });
    });
    var openid;
    function getopenid() {
        openid = window.localStorage.getItem("openid");
        if(openid == null || openid == undefined || openid == '') {
            getCode();
        }
    }
    function getCode() {
        var code = Common.queryGetParam('code');
        if(code == null || code == undefined || code == '') {
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx95bdc635798fcfe4&redirect_uri="+window.location.href+"&response_type=code&scope=snsapi_base#wechat_redirect";
            return;
        }
        var paramStr = {};
        paramStr.code = code;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/common/getWxUserOpenId", params, function(data) {
            openid = data.openid;
            window.localStorage.setItem("openid", data.openid);
        },false);
    }
    var userId;
    function opendIdLogin() {
        var paramStr = {};
        paramStr.wxOpenId = openid;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/login/wxOpenIdLoginOrRegister", params, function(data) {
            userId = data.userId;
            $.cookie("userId",data.userId,{expires:7,path:"/"});
            $.cookie("token",data.token,{expires:7,path:"/"});
            if(data.phoneNum){
                phoneNum = data.phoneNum;
                window.localStorage.setItem("phoneNum", data.phoneNum);
            }

            console.log(data);
        },false);
    }

    //查询
    function queryList(me) {
        //var userId = "5ac712ef4d6444c384014e391aeedce8";
        var layid = $(me).attr("lay-id");
        var group = $(me).attr("data-value");
        var $flowmore = $("#"+layid).find("#pagination").find(".layui-flow-more");
        //能找到说明已经初始化过分页对象
        if($flowmore.length>0){
            return;
        }

        var paramStr = {};
        paramStr.userId = userId;
        paramStr.changedGroup = group;
        paramStr.pageLimit = 10;
        paramStr.pageStart = 0;
        var params = {};
        params.paramStr =  JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/game/getMyGoodsList", params, function(data) {
            console.log(data);
            $("#"+layid+"Span").text(data.pageTotal);//显示总条数
            var $list = $("#"+layid).find("#orderList");
            var $pagination = $("#"+layid).find("#pagination");
            $list.empty();
            drawList($list,data.datas,layid);
            //分页
            layui.use('flow', function(){
                var flow = layui.flow;
                flow.load({
                    elem: $pagination //指定列表容器
                    ,isAuto:false  //是否自动加载
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        if(page!=1){
                            paramStr.pageStart = (page-1)*paramStr.pageLimit;
                            var p = {};
                            p.paramStr = JSON.stringify(paramStr);
                            Common.ajaxWithParam("/fenful/api/v1/game/getMyGoodsList",p,function (d2) {
                                drawList($list,d2.datas,layid);
                            });
                        }
                        next('', (page*paramStr.pageLimit) < data.pageTotal);
                    }
                });
            });

        });

    }

    //绘制
    function drawList(me,list,layid) {
        if(list.length==0){
            $(me).append("暂无记录");
        }else{
            var html = $("script[type='text/"+layid+"']").html();
            for(var index in list){
                var htmlStr = Common.formatTemplate(list[index],html,"");
                $(me).append(htmlStr);
            }
        }
    }

    function showCode(me) {
        var code = $(me).attr("data-value");
        layer.alert("您的兑换码为："+code+"<br>将此码出示给店员兑换您的礼品");
    }
</script>
</body>
</html>